<script lang="tsx">
import { defineComponent, ref, onMounted, type PropType, toRefs } from 'vue';
import { Bold, Italic, Underline, Play } from '@vben/icons';
import { IconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales';
import PickColor from '#/components/pickColor.vue';

interface TextFormatType {
  fontSize?: number;
  fontColor?: string;
  fontBold?: boolean;
  italic?: boolean;
  underline?: boolean;
  alignCenter?: string;
}
export default defineComponent({
  name: 'SetTextFormat',
  props: {
    modelValue: {
      type: Object as PropType<TextFormatType>,
      required: true
    }
  },
  setup(props) {
    const { modelValue } = toRefs(props)

    const fontSizeList = ref<{ label: string; value: number }[]>([])
    const alignTypes = {
      left: 'align-start-vertical',
      center: 'align-center-vertical',
      right: 'align-end-vertical'
    }

    // 对齐选项配置
    const alignOptions = [
      { key: 'left', label: 'certificateTemplate.alignLeftTxt' },
      { key: 'center', label: 'certificateTemplate.alignCenterTxt' },
      { key: 'right', label: 'certificateTemplate.alignRightTxt' }
    ]

    // 检查属性是否存在
    const hasProperty = (key: keyof TextFormatType) => {
      return modelValue.value[key] !== undefined
    }
    const handleFontBold = (data: TextFormatType) => {
      data.fontBold = !data.fontBold
    }

    const handleFontItalic = (data: TextFormatType) => {
      data.italic = !data.italic
    }

    const handleFontUnderline = (data: TextFormatType) => {
      data.underline = !data.underline
    }

    const handleAlignCenter = (command: string, data: TextFormatType) => {
      console.log(command, data)
      data.alignCenter = command
    }

    const dropdownList = () => {
      return (<el-dropdown-menu>
        {alignOptions.map(item => (
          <el-dropdown-item
            key={item.key}
            class={modelValue.value.alignCenter === item.key ? 'text-[#007AFF]' : ''}
            command={item.key}
          >
            {$t(item.label)}
          </el-dropdown-item>
        ))}
      </el-dropdown-menu>)
    }

    onMounted(() => {
      fontSizeList.value = Array.from({ length: 51 }, (_, index) => index + 10).map((item: number) => {
        return {
          label: `${item}px`,
          value: item
        }
      })
    })
    return () => (
      <section class="w-full">
        <div class="flex items-center justify-between gap-[16px]">
          {/* 字体大小 */}
          {hasProperty('fontSize') && (
            <el-select v-model={modelValue.value.fontSize} class="flex-auto"
              placeholder={$t('certificateTemplate.fontSizeTxt')}>
              {fontSizeList.value.map((size) => (
                <el-option key={size.value} label={size.label} value={size.value} />
              ))}
            </el-select>
          )}
          <div class="h-[16px] leading-[16px] flex items-center border-l border-[#DCDFE6] pl-[16px]">
            {/* 字体颜色 */}
            {hasProperty('fontColor') && (
              <PickColor 
                modelValue={modelValue.value.fontColor || '#000000'} 
                onUpdate:modelValue={(color: string) => modelValue.value.fontColor = color} 
              />
            )}
            {/* 加粗 */}
            {hasProperty('fontBold') && (
              <el-tooltip effect="dark"
                content={`${modelValue.value.fontBold ? $t('certificateTemplate.fontBoldCancelTxt') : $t('certificateTemplate.fontBoldTxt')}`}
                show-after={1000} placement="top">
                <el-button link icon={Bold} onClick={() => handleFontBold(modelValue.value)}
                  style={{ color: modelValue.value.fontBold ? '#007AFF' : '#000000' }}
                  class="inline-block text-[#007AFF] text-[16px] ml-[8px]"></el-button>
              </el-tooltip>
            )}
            {/* 斜体 */}
            {hasProperty('italic') && (
              <el-tooltip effect="dark"
                content={`${modelValue.value.italic ? $t('certificate.settingBanner.italicCancel') : $t('certificate.settingBanner.italic')}`}
                show-after={1000} placement="top">
                <el-button icon={Italic} link onClick={() => handleFontItalic(modelValue.value)}
                  style={{ color: modelValue.value.italic ? '#007AFF' : '#000000' }}
                  class="inline-block text-[#007AFF] text-[16px] ml-[8px]">
                </el-button>
              </el-tooltip>
            )}
            {/* 下划线 */}
            {hasProperty('underline') && (
              <el-tooltip effect="dark"
                content={`${modelValue.value.underline ? $t('certificate.settingBanner.underlineCancel') : $t('certificate.settingBanner.underline')}`}
                show-after={1000} placement="top">
                <el-button icon={Underline} link onClick={() => handleFontUnderline(modelValue.value)}
                  style={{ color: modelValue.value.underline ? '#007AFF' : '#000000' }}
                  class="inline-block text-[#007AFF] text-[16px] ml-[8px]">
                </el-button>
              </el-tooltip>
            )}
            {/* 对齐 */}
            {hasProperty('alignCenter') && (
              <el-dropdown class="ml-[8px]" v-model={modelValue.value.alignCenter} teleported={false} tabindex={999} trigger="click" onCommand={(command: string) => handleAlignCenter(command, modelValue.value)}
                v-slots={{ dropdown: dropdownList }}
              >
                <span class="el-dropdown-link">
                  <el-tooltip effect="dark" content={$t('certificateTemplate.alignCenterSettingTxt')} show-after={1000}
                    placement="top">
                    <div class="flex items-center">
                      <IconifyIcon
                        icon={`lucide:${alignTypes[modelValue.value.alignCenter as keyof typeof alignTypes] || 'align-left'}`} />
                      <el-icon>
                        <Play fill="#595959" class="text-[#595959] play-icon scale-[0.6] inline-block align-top rotate-90">
                        </Play>
                      </el-icon>
                    </div>
                  </el-tooltip>
                </span>
              </el-dropdown>
            )}
          </div>
        </div>
      </section >
    )
  }
})

</script>
<style scoped>
:deep(.el-button+.el-button) {
  margin-left: 8px!important;
}
</style>
